<!--  -->
<template>
  <div class="hbh-container">
    <commonTitle :title="'设备区域分布'" />
    <div class="contentBox">
      <div class="itemBox" v-for="(item,index) in data" :key="index">
        <div class="title">
          {{ item.name }}
        </div>
        <div class="process">
          <span></span><span :style="{width:item.value/total*100+'%'}"></span>
          <div class="showValue" :style="{left:item.value/total*100+'%'}">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "equipmentcollect",
  components: {},
  data() {
    //这里存放数据
    return {
      data: [
        {
          name: "五坡1栋",
          value: 167,
        },
        {
          name: "八坡1栋",
          value: 67,
        },
        {
          name: "四坡1栋",
          value: 123,
        },
        {
          name: "七坡1栋",
          value: 55,
        },
        {
          name: "六坡1栋",
          value: 78,
        },
        {
          name: "体育馆",
          value: 88,
        },
        {
          name: "食堂",
          value: 98,
        },
        {
          name: "校办公",
          value: 198,
        },
      ],
      total:200,//总数量
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .contentBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .itemBox {
      width: 100%;
      display: flex;
      align-items: center;
      .title {
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
      }

      .process {
        width: calc(100% - 120px);
        height: 40px;
        display: flex;
        align-items: center;
        position: relative;
        .showValue {
          position: absolute;
          height: 40px;
          line-height: 40px;
          left: 80%;
          top: calc(50% - 20px);
        }
        span {
          position: absolute;
          width: 100%;
          height:8px;
          background-color: #435b6e;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
        span:nth-of-type(2) {
          width: 80%;
          position: relative;
          background:linear-gradient(to right,#435b6e,#81D3F8);
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
    }
  }
}
</style>
